<script setup lang="ts">
import type { PropType } from 'vue'
import type { SetMealBasicInfoVO } from '@/apis/good/model'

const props = defineProps({
  setMealList: {
    type: Array<SetMealBasicInfoVO>,
    default: () => [],
  },
  shopId: {
    type: String as PropType<Long>,
    default: '',
  },
})

const { divTenThousand } = useConvert()

const jumpDetial = (id: number) => {
  uni.navigateTo({
    url: `/pluginPackage/setMeal/views/setMealDetial/setMealDetial?setMealId=${id}&shopId=${props.shopId}`,
  })
}
</script>
<template>
  <view v-if="$props.setMealList?.length" class="goods-card">
    <text class="goods-card__title">优惠套装</text>
    <view style="padding: 0 24rpx">
      <scroll-view class="scroll-card" scroll-x scroll-left="120">
        <view v-for="item in $props.setMealList" :key="item.setMealId" class="scroll-card__item" @click="jumpDetial(item.setMealId)">
          <view class="item-card">
            <image class="item-card__img" :src="item.setMealMainPicture" />
            <div class="item-card__detali">
              <text>{{ item.setMealName }}</text>
              <text style="color: rgba(222, 50, 36, 1)">最多可省￥{{ divTenThousand(item.saveAtLeast) }}</text>
              <text style="color: rgba(153, 153, 153, 1)">活动至{{ item.endTime }}</text>
            </div>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
@include b(goods-card) {
  margin: 10rpx;
  overflow: hidden;
  border-radius: 16rpx;
  background-color: rgba(255, 255, 255, 1);
  @include e(title) {
    font-weight: 700;
    padding: 20rpx 32rpx;
    @include flex;
    justify-content: flex-start;
    line-height: 25rpx;
  }
}
@include b(scroll-card) {
  white-space: nowrap;
  width: 100%;
  height: 288rpx;
  margin-top: 18rpx;
  @include e(item) {
    display: inline-block;
    width: 610rpx;
    height: 256rpx;
    text-align: center;
    font-size: 36rpx;
    margin: 12rpx;
  }
}
@include b(item-card) {
  @include flex;
  width: 610rpx;
  justify-content: left;
  background-color: rgba(243, 243, 243, 1);
  padding: 20rpx;
  @include e(img) {
    width: 212rpx;
    height: 212rpx;
  }
  @include e(detali) {
    margin-left: 24rpx;
    display: flex;
    flex-direction: column;
    color: rgba(51, 51, 51, 1);
    font-size: 24rpx;
    text {
      text-align: left;
      margin-bottom: 15rpx;
      padding: 10rxp 0;
    }
  }
}
</style>
